<template>
  <div class="query-strategy-add">
    <je-modal
      v-model:visible="visibleForm"
      title="添加查询策略"
      width="400px"
      class="assist-model"
      height="auto"
      :resize="false"
      :maximizable="false"
      cancel-button
      :ok-button="addModule"
      @close="cancelModal"
    >
      <je-form ref="formRefModule" layout="vertical" autocomplete="off">
        <je-form-item label="策略名称" v-bind="validateInfos.QUERYSTRATEGY_NAME">
          <je-input v-model:value="modelRef.QUERYSTRATEGY_NAME" />
        </je-form-item>
      </je-form>
    </je-modal>
  </div>
</template>

<script>
  import { defineComponent, ref, reactive, onMounted } from 'vue';
  import { Input, Modal, Form } from '@jecloud/ui';
  import { addQueryStrategy } from '@/api/index';
  import { verifyData } from '@/helper/regular';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'AddQueryStrategy',
    components: {
      JeModal: Modal,
      JeInput: Input,
      JeForm: Form,
      JeFormItem: Form.Item,
    },
    props: {
      recordData: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['chageState'],
    setup(props, { emit }) {
      //关闭弹窗
      const cancelModal = (modal) => {
        emit('chageState');
      };

      //
      const visibleForm = ref(true);
      const modelRef = reactive({
        QUERYSTRATEGY_NAME: '',
      });
      const rulesRef = reactive({
        QUERYSTRATEGY_NAME: verifyData.name,
      });
      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
        onValidate: (...args) => {},
      });
      //添加
      const addModule = ({ $modal, button }) => {
        const modal = $modal,
          btn = button;
        btn.loading = true;
        //保存数据逻辑
        validate()
          .then(() => {
            addQueryStrategy({
              QUERYSTRATEGY_FUNCINFO_ID: props.recordData.id,
              QUERYSTRATEGY_NAME: modelRef.QUERYSTRATEGY_NAME,
              QUERYSTRATEGY_FUNCCODE: props.recordData.FUNCINFO_FUNCCODE,
            })
              .then((data) => {
                Modal.message(data.message, 'success');
                modal.close();
                btn.loading = false;
                emit('chageState');
              })
              .catch((e) => {
                btn.loading = false;
                Modal.alert(e.message, 'error');
              });
          })
          .catch((error) => {
            btn.loading = false;
          });
        return false;
      };
      return {
        visibleModule: true,
        visibleForm,
        cancelModal,
        validateInfos,
        resetFields,
        modelRef,
        addModule,
      };
    },
  });
</script>

<style lang="less" scoped></style>
